<template>
  <div class="app-container">
    <el-card shadow="never" class="table-container">
      <!-- 按钮开始 -->
      <template #header>
        <!-- 按钮开始 -->
        <el-row justify="space-between" :span="20">
          <el-col :span="12">
            <el-button type="primary" @click="handleAdd" v-if="props.taskId">
              {{ $t("common.add") }}
            </el-button>
          </el-col>
          <el-col :span="8" align="right">
            <jmash-column-select
              v-model="tableLabel"
              label-name="flow/task-attachment"
            />
          </el-col>
        </el-row>
      </template>
      <!-- 按钮结束 -->
      <!-- 表格开始 -->
      <jmash-table
        v-if="tableData && tableData.length > 0"
        class="table-top"
        ref="multipleTableRef"
        row-key="id"
        :list-loading="listLoading"
        :data="tableData"
        :table-label="tableLabel"
        @selection-change="tableSelected"
      >
        <!-- USER_ID_ -->
        <template #userId="scope">
          <span>
            {{ rbacApi.userInfo(scope.data.row.userId).nickName }}
          </span>
        </template>
        <!-- TYPE_ -->
        <template #type="scope">
          <span>
            {{ scope.data.row.type }}
          </span>
        </template>
        <!-- TASK_ID_ -->
        <template #taskId="scope">
          <span>
            {{ scope.data.row.taskId }}
          </span>
        </template>
        <!-- URL_ -->
        <template #url="scope">
          <span>
            {{ scope.data.row.url }}
          </span>
        </template>
        <!-- TIME_ -->
        <template #time="scope">
          <span>
            {{ format(new Date(scope.data.row.time), "yyyy-MM-dd HH:mm:ss") }}
          </span>
        </template>
        <template #operation="scope">
          <el-button type="primary" link @click="handleEdit(scope.data.row)">
            {{ $t("common.edit") }}
          </el-button>
          <el-button
            type="primary"
            link
            @click="tableHooks.deleteRecord(scope.data.row)"
          >
            {{ $t("common.delete") }}
          </el-button>
          <el-button type="primary" link @click="downloadFile(scope.data.row)">
            {{ $t("flow.download") }}
          </el-button>
        </template>
      </jmash-table>
    </el-card>
    <!-- 表格结束 -->
    <task-attachment-edit-dialog
      v-if="editDialog.visible"
      v-model="editDialog.visible"
      :title="editDialog.title"
      :entity="entity"
      @refresh="refresh"
      width="600px"
    />
  </div>
</template>
<script setup lang="ts">
import { type Ref, ref, reactive, onUpdated } from "vue";
import { type TableColumn, type DialogRef, useTableHooks } from "jmash-core";
import { format } from "date-fns";
import { rbacApi } from "jmash-rbac";
import { fileApi } from "jmash-core";
import { FileUtil } from "@/util/fileutil";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

import type {
  TaskAttachmentReq,
  TaskAttachmentModel,
} from "@/api/flow/attachment/types";
import { taskAttachmentApi } from "@/api/flow/attachment/index";

const props = defineProps({
  procInstId: {
    type: String,
    default: "",
  },
  taskId: {
    type: String,
    default: undefined,
  },
});

const queryParams = ref<TaskAttachmentReq>({
  procInstId: props.procInstId,
  taskId: props.taskId,
});

//变更检测.
onUpdated(() => {
  if (queryParams.value.procInstId !== props.procInstId) {
    queryParams.value.procInstId = props.procInstId;
    // 执行相应逻辑
    refresh(true);
  }
  if (queryParams.value.taskId !== props.taskId) {
    queryParams.value.taskId = props.taskId;
    // 执行相应逻辑
    refresh(true);
  }
});

const { tableHooks, multipleTableRef, listLoading, tableData } = useTableHooks(
  t,
  taskAttachmentApi,
  queryParams,
);

console.log("props.taskId", tableData);

let tableLabel: Ref<TableColumn[]> = ref([
  {
    label: "taskAttachment.name",
    prop: "name",
    sortable: true,
    isColumn: true,
  },
  {
    label: "taskAttachment.type",
    prop: "type",
    width: "150",
    sortable: true,
    isColumn: true,
  },
  {
    label: "taskAttachment.taskId",
    prop: "taskId",
    width: "150",
    slotName: "taskId",
    columnType: "slot",
    sortable: true,
    isColumn: false,
  },
  {
    label: "taskAttachment.userId",
    prop: "userId",
    width: "150",
    slotName: "userId",
    columnType: "slot",
    sortable: true,
    isColumn: true,
  },
  {
    label: "taskAttachment.time",
    prop: "time",
    width: "130",
    slotName: "time",
    columnType: "slot",
    sortable: true,
    isColumn: true,
  },
  {
    label: "common.operate",
    width: "160",
    slotName: "operation",
    columnType: "slot",
    fixed: "right",
    isColumn: true,
  },
]);

//编辑Dialog
const editDialog = ref({
  title: t("common.edit"),
  visible: false,
} as DialogRef);

let entity = reactive<TaskAttachmentModel>({ taskId: props.taskId });

// 新增
function handleAdd() {
  entity = reactive<TaskAttachmentModel>({ taskId: props.taskId });
  editDialog.value.title = t("common.add");
  editDialog.value.visible = true;
}

// 编辑
function handleEdit(row: TaskAttachmentModel) {
  Object.assign(entity, row);
  editDialog.value.title = t("common.edit");
  editDialog.value.visible = true;
}

//行选择
function tableSelected(value: TaskAttachmentModel[]) {
  tableHooks.selectionRows.value = value;
}

//下载文件
function downloadFile(row: TaskAttachmentModel) {
  const fileUrl = fileApi.fileUrl(row.url);
  FileUtil.download(fileUrl, row.name as string);
}

/**
 * 从子组件传过来的事件，刷新列表
 *
 * @returns {void}
 */
function refresh(value: boolean) {
  if (value) {
    tableHooks.getList();
  }
}

//查询数据.
tableHooks.getList();
</script>
